<template>
	<div>
      <div ref="qrCodeUrl" class="qrCodeUrl"></div>
      <div style="margin-top: 0.5rem; font-size: 0.33rem; color: rgb(120, 119, 119);" v-if="!weixin" @click="xiazai2">保存图片</div>
      <div style="margin-top: 0.5rem; font-size: 0.33rem; color: rgb(120, 119, 119);" v-if="weixin">长按图片保存</div>

	</div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import QRCode from 'qrcodejs2'
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'shoujixiazaitu',
    props:['url'],
		data() {
			return {
        urls:"",
        weixin:false
			}
		},
		created() {
      if(this.url){
        this.urls = this.url
      }else{
        this.urls = window.location.href
      }

		},

		mounted() {

      this.creatQrCode()

      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/micromessenger/i) == 'micromessenger') {
           this.weixin = true
      }
		},

		methods: {
      creatQrCode(url) {
        console.log(this.$refs.qrCodeUrl)
        this.$refs.qrCodeUrl.innerHTML = ""
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: this.urls, // 需要转换为二维码的内容
            width: 300,
            height: 300,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
      },

      base64ToBlob (code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new window.Blob([uInt8Array], {type: contentType});
      },
      getRandomChar:function(len = 15)  {
        var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
        var  tmp = ""
        var timestamp = new Date().getTime();
        for(var  i=0;i<len;i++)  {
          tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
        }
        return  timestamp+tmp;
      },
      uploadok: function(file,who) {
        let name = this.getRandomChar() + '.jpg'
        var that = this
        axios.post(`/api/qiniu/uploadtoken`,{name:name})
          .then(response => {
            if(response.data.msg.code == 0){
              const observer = {
                next(res){
                  console.log(res)
                },
                error(err){
                  console.log(err)
                },
                complete(res){
                  location.href = 'https://gperson.gantanhaokeji.top/'+ res.key + '?attname='
                }
              }
              const observable = qiniu.upload(file,name, response.data.data.token, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },

      //手机版下载二维码最终方案  二维码转blob  上传到七牛   下载七牛地址
      xiazai2:function(){
        let canvas = this.$refs.qrCodeUrl.childNodes[0]
        let img = canvas.toDataURL('image/jpeg')
        let blob = this.base64ToBlob(img)  // 转码
        this.uploadok(blob)
      },


      putongxiazai:function(url){
        let a = document.createElement("a");
        a.href = url + '?attname='
        a.download = "海报图.jpg"
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
		}
	}
</script>
<style scoped lang="less">
  .qrCodeUrl{ width: 6rem;
    img{ width: 6rem;}
  }

</style>

